<style lang="less" scoped>
    .api table {
        font-family: Consolas, Menlo, Courier, monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,
    .api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px !important
    }

    .operategroup {
        display: flex;
        justify-content: center;
        width: 60px;
        .operate {
            margin: 0 5px;
            cursor: pointer;
        }
    }
</style>
<template>
    <div>
        <article>
            <h1>Progress 进度条</h1>
            <Anchor title="概述" h2></Anchor>
            <p>展示操作或任务的当前进度，比如上传文件。</p>
            <Alert show-icon style="margin-top: 16px">注意：非 template/render 模式下，需使用 <code>i-progress</code>。</Alert>
            <Anchor title="代码示例" h2></Anchor>
            <Demo title="基本用法">
                <div slot="demo">
                    <Progress :stroke-width="8" :percent="25"></Progress>
                    <Progress :stroke-width="8" :percent="45" status="active"></Progress>
                    <Progress :stroke-width="8" :percent="65" status="wrong"></Progress>
                    <Progress :stroke-width="8" :percent="100"></Progress>
                    <Progress :stroke-width="8" :percent="25" hide-info></Progress>
                </div>
                <div slot="desc">
                    <p>处在不同状态下的进度条，当 percent 为 100 时，自动将状态置为 success。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.base }}</i-code>
            </Demo>
            <Demo title="垂直方向">
                <div slot="demo">
                    <div style="height: 160px;">
                        <Progress :stroke-width="8" vertical :percent="25"></Progress>
                        <Progress :stroke-width="8" vertical :percent="45" status="active"></Progress>
                        <Progress :stroke-width="8" vertical :percent="65" status="wrong"></Progress>
                        <Progress :stroke-width="8" vertical :percent="100"></Progress>
                        <Progress :stroke-width="8" vertical :percent="25" hide-info></Progress>
                    </div>
                </div>
                <div slot="desc">
                    <p>设置属性 <code>vertical</code> 将以垂直方向显示。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
            </Demo>
            <Demo title="配合外部组件使用">
                <div slot="demo">
                    <Progress :stroke-width="8" :percent="percent"></Progress>
                    <div class="operategroup">
                        <div class="operate" @click="add">
                            <Icon color="#0B7DE6" size="24" type="ios-plus-outline"></Icon>
                        </div>
                        <div class="operate" @click="minus">
                            <Icon color="#0B7DE6" size="24" type="ios-minus-outline"></Icon>
                        </div>
                    </div>
                </div>
                <div slot="desc">
                    <p>通过数据的联动和逻辑控制，实现动态效果。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.percent }}</i-code>
            </Demo>
            <Demo title="自定义更多样式">
                <div slot="demo">
                    <Progress :percent="25" :stroke-width="5"></Progress>
                    <Progress :percent="100">
                        <Icon type="checkmark-circled"></Icon>
                        <span>成功</span>
                    </Progress>
                </div>
                <div slot="desc">
                    <p>通过自定义<code>slot</code>和属性<code>stroke-width</code>改变进度条效果。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.custom }}</i-code>
            </Demo>
            <div class="api">
                <Anchor title="API" h2></Anchor>
                <Anchor title="Progress props" h3></Anchor>
                <table>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>percent</td>
                        <td>百分比</td>
                        <td>Number</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>status</td>
                        <td>状态，可选值为<code>normal</code>、<code>active</code>、<code>wrong</code>、<code>success</code></td>
                        <td>String</td>
                        <td>normal</td>
                    </tr>
                    <tr>
                        <td>stroke-width</td>
                        <td>进度条的线宽，单位 px</td>
                        <td>Number</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>hide-info</td>
                        <td>隐藏数值或状态图标</td>
                        <td>Boolean</td>
                        <td>false</td>
                    </tr>
                    <tr>
                        <td>vertical</td>
                        <td>是否在垂直方向显示</td>
                        <td>Boolean</td>
                        <td>false</td>
                    </tr>
                    </tbody>
                </table>
                <Anchor title="Progress slot" h3></Anchor>
                <table>
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>说明</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>无</td>
                        <td>自定义显示状态内容</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </article>
    </div>
</template>
<script>
	import Demo from './demo/demo.vue';
	import Anchor from './anchor.vue';
	import iCode from './code/code';
	import Code from './code/progress';

	export default {
		components: {
			iCode,
			Demo,
			Anchor
		},
		data() {
			return {
				code: Code,
				percent: 0
			}
		},
		methods: {
			add() {
				if (this.percent >= 100) {
					return false;
				}
				this.percent += 10;
			},
			minus() {
				if (this.percent <= 0) {
					return false;
				}
				this.percent -= 10;
			}
		}
	}

</script>
